<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <p class="tip"><svg-icon icon-class="shop"></svg-icon>请拍下后联系客服修改价格</p>
      <ul>
        <li v-for="(item,index) in shop_list" ::key="index">
          <img :src="item.img" alt="图片加载失败">
          <span>{{ item.name }}</span>
          <el-button type="text" size="small">了解更多</el-button>
        </li>
      </ul>
    </el-row>
    <el-row>
      <p class="err"><svg-icon icon-class="shop"></svg-icon>售价请详细咨询QQ123465</p>
      <ul>
        <li v-for="(item,index) in shop_list" ::key="index">
          <img :src="item.img" alt="图片加载失败">
          <span>{{ item.name }}</span>
          <el-button type="text" size="small" class="red">121元/台</el-button>
        </li>
      </ul>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
export default {
  name: 'uphicooShop',
  components: {
    Breadcrumb
  },
  data() {
    return {
      shop_list: [
        {
          id: '0',
          url: 'http://baidu.com',
          img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521001846935&di=9bf5b8e852d295fa0eb96b2cd38bd5d8&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F3801213fb80e7bec00e429f3232eb9389b506be1.jpg',
          name: '微信公众号开发'
        },
        {
          id: '1',
          url: 'http://baidu.com',
          img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521001846935&di=9bf5b8e852d295fa0eb96b2cd38bd5d8&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F3801213fb80e7bec00e429f3232eb9389b506be1.jpg',
          name: '官网模版购买'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-row{
    p{
      margin: 0;
      svg{
        margin-right: 10px;
      }
    }
    ul{
      font-size: 14px;
      padding: 0 0 0 10px;
      margin: 10px 0 20px 0;
      li{
        padding: 15px 20px;
        height: 230px;
        width: 180px;
        display: inline-block;
        text-align: center;
        border: 1px solid #ddd;
        margin-right: 20px;
        img{
          width: 130px;
          height: 130px;
          display: block;
        }
        span{
          display: block;
          margin: 8px 0;
        }
        .el-button{
          padding: 5px 15px;
          border: 1px solid #007eff;
          border-radius: unset;
        }
        .red{
          color: #ec4141;
          border-color: #ec4141;
        }
      }
    }
  }
</style>
